/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Tabs } from 'antd-mobile'
import { getOrderList } from '../../actions/orderListActions'
import {
	NoData
} from '../../components/orderList'
import { TabBar, OrderListCard, ListTab } from 'app/components'
import 'style/orderList.scss'
import style from './index.scss'
import common from '../../utils/common'
const TabPane = Tabs.TabPane;

class OrderList extends Component {
	constructor(props) {
		super(props)
		console.log(props)
		// let selectedIndex = props.selectedIndex=="JIUJIU"?1:0;
		this.state = {
			type: sessionStorage.getItem('tagIndex') || 1,

			orderList: [],
			cacheArrOne: [],
			cacheArrTwo: [],
			cacheArrThree: [],

			cacheArrOneState: false,
			cacheArrTwoState: false,
			cacheArrThreeState: false,
			"selectedIndex": 1,
			isShow: true,
			tabBar: {
				selectedIndex: 1, // 选中的tab下标
				isFixed: true, // 是否固定在底部
				list: [
					{
						pagePath: "test", // 页面跳转路由
						text: "车辆年检",  // tab文案
						iconPath: "./images/visaNav.png", //默认图标
						selectedIconPath: "./images/visaNav_s.png",  // 选中图标
					},
					{
						pagePath: "orderList",
						text: "我的订单",
						iconPath: "./images/orderNav.png",
						selectedIconPath: "./images/orderNav_s.png",
					},
				]
			}
		}
		this.handleIndexChange = this.handleIndexChange.bind(this);
	}

	/**
	 * 生命周期
	 */
	componentWillMount() {

	}
	componentWillUnmount() {
		// window.isShowVisa = true;
		// sessionStorage.setItem('getRegionType',1)
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentDidMount() {
		common.setViewTitle('我的订单');
		this.handleIndexChange(this.state.type);
	}

	//处理Tab标签变化
	handleIndexChange(index, labelCode) {
		sessionStorage.setItem('tagIndex', index)
		this.setState({
			"selectedIndex": index,
			isShow: true
		})
		if (index == 1) {
			if (this.state.cacheArrOne.length || this.state.cacheArrOneState) {
				this.setState({
					orderList: this.state.cacheArrOne,
					isShow: false
				})
			} else {
				//业务类型 1查询办理中，2/查询已完成, 3 查询全部订单
				let getData = {
					bizFlag: index
				}
				this.props.dispatch(getOrderList(getData, (res) => {
					this.setState({
						orderList: res,
						isShow: false,
						cacheArrOne: res,
						cacheArrOneState: true
					})
				}))
			}
		} else if (index == 2) {
			if (this.state.cacheArrTwo.length || this.state.cacheArrTwoState) {
				this.setState({
					orderList: this.state.cacheArrTwo,
					isShow: false
				})
			} else {
				//业务类型 1查询办理中，2/查询已完成, 3 查询全部订单
				let getData = {
					bizFlag: index
				}
				this.props.dispatch(getOrderList(getData, (res) => {
					this.setState({
						orderList: res,
						isShow: false,
						cacheArrTwo: res,
						cacheArrTwoState: true
					})
				}))
			}
		} else if (index == 3) {
			if (this.state.cacheArrThree.length || this.state.cacheArrThreeState) {
				this.setState({
					orderList: this.state.cacheArrThree,
					isShow: false
				})
			} else {
				//业务类型 1查询办理中，2/查询已完成, 3 查询全部订单
				let getData = {
					bizFlag: index
				}
				this.props.dispatch(getOrderList(getData, (res) => {
					this.setState({
						orderList: res,
						isShow: false,
						cacheArrThree: res,
						cacheArrThreeState: true
					})
				}))
			}
		}

	}

	// 底部tab点击
	tabClick(index) {
		let { tabBar } = this.state;
		let { list } = tabBar;
		this.props.router.replace(list[index].pagePath);
	}

	//订单点击
	orderClick(order) {
		console.log(order)
	}

	render() {
		{/*<NoData key={headTag.key}/>*/ }
		return (
			<div className={style.orderList} style={{ paddingBottom: '1rem' }}>

				<ListTab
					handleIndexChange={this.handleIndexChange}
					selectedIndex={this.state.selectedIndex}
					/>
				<div style={{ height: '.24rem' }}></div>
				{
					this.state.isShow ? <div className={style.load}>加载中......</div> :
						this.state.orderList.length ? this.state.orderList.map((order, orderListIndex) =>
							<OrderListCard
								key={orderListIndex}
								order={order}
								handleClick={(o) => this.orderClick(o)}
								/>
						) : <NoData />

				}

				{/*底部导航菜单start*/}
				<TabBar {...this.state.tabBar} tabClick={(index) => this.tabClick(index)} />
				{/*底部导航菜单end*/}
			</div>
		)
	}
}

//使用context
OrderList.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderList.defaultProps = {
	data: [],
	index: ['', ''],
	headTag: [   //标签头部
		{
			name: '办理中',
			key: 1
		}, {
			name: '已完成',
			key: 2
		}, {
			name: '全部订单',
			key: 3
		}
	],
	orderList: [],
	list: [
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' },
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' },
		{ type: '林炳新个人游港澳再签注', mony: 95, orderNum: 2210234745050, state: 1, stateText: '预约申请中' }
	]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)